<template>
  <div class="home">
    <van-nav-bar>
      <template #left>
        <van-image
          width="120"
          fit="contain"
          :src="require('@/assets/logo.png')"
        />
      </template>
      <template #right>
        <van-button
          class="btn-search"
          icon="search"
          to="/search"
          round
          type="primary"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <van-tabs v-model="active">
      <van-tab v-for="item in channellist" :key="item.id" :title="item.name">
        <articleList :channel_id="item.id" />
      </van-tab>
      <van-icon @click="show = true" class="icon-channel" name="wap-nav" />
    </van-tabs>
    <van-action-sheet v-model="show" title="频道管理">
      <!-- 普通写法 -->
      <!-- <channel-edit
        :channellist="channellist"
        :allChannels="allChannels"
        :value="active"
        @input="active = $event"
        @close="show=false"
      /> -->

      <channel-edit
        :channellist="channellist"
        :allChannels="allChannels"
        v-model="active"
        @close="show = false"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import articleList from "./articleList.vue";
import { channelAPI, channelsAllAPI } from "@/api";
import { getChannel } from "@/utils/storage";
import ChannelEdit from "./channelEdit.vue";
export default {
  data() {
    return {
      show: false,
      loading: false,
      finished: false,
      channellist: [],
      allChannels: [],
      active: 0,
    };
  },
  components: {
    articleList,
    ChannelEdit,
  },
  async created() {
    let local = getChannel();
    if (!local || this.$store.state.tokenObj.token) {
      let res = await channelAPI();
      // console.log(res);
      this.channellist = res.data.data.channels;
    } else {
      this.channellist = local;
    }

    let res2 = await channelsAllAPI();
    this.allChannels = res2.data.data.channels;
  },
  // updated() {
  //   console.log(this.active);
  // },
  methods: {},
};
</script>

<style lang="less" scoped>
.home {
  .btn-search {
    background-color: rgba(255, 255, 255, 0.2);
    width: 100px;
    height: 30px;
    border: none;
    .van-icon-search {
      color: #fff;
    }
  }
  .van-tabs {
    ::v-deep .van-tabs__nav {
      width: 85%;
    }
    .icon-channel {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      font-size: 30px;
      width: 10%;
      text-align: center;
    }
  }
}
</style>